<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">
        <Alert show-icon>
          建议此组件在发布阶段设置为隐藏
        </Alert>
        <Collapse value="0">
          <Panel>
            抽屉配置
            <div slot="content">
              <Form :label-width="130">
                <FormItem label="标题">
                  <Input size="small" v-model="drawerConfig.title" placeholder=""/>
                </FormItem>
                <FormItem label="宽度">
                  <Input size="small" v-model="drawerConfig.width" placeholder="可编辑数字或百分比"/>
                </FormItem>
                <FormItem label="显示右上角关闭按钮">
                  <i-switch size="small" v-model="drawerConfig.closable"></i-switch>
                </FormItem>
                <FormItem label="显示遮罩层">
                  <i-switch size="small" v-model="drawerConfig.mask"></i-switch>
                </FormItem>
                <FormItem label="允许点击遮罩层关闭">
                  <i-switch size="small" v-model="drawerConfig.maskClosable"></i-switch>
                </FormItem>
                <FormItem label="抽屉方向">
                  <Select size="small" v-model="drawerConfig.placement">
                    <Option value="left">左侧</Option>
                    <Option value="right">右侧</Option>
                    <Option value="top">上边</Option>
                    <Option value="bottom">下边</Option>
                  </Select>
                </FormItem>
                <FormItem label="将抽屉放置于Body内">
                  <i-switch size="small" v-model="drawerConfig.transfer"></i-switch>
                </FormItem>
                <FormItem label="是否可拖拽调整宽度">
                  <i-switch size="small" v-model="drawerConfig.draggable"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            IFrame配置
            <div slot="content">
              <Form :label-width="80">
                <FormItem label="名称">
                  <Input size="small" v-model="iframeConfig.name" placeholder="对应iframe的name属性"/>
                </FormItem>
                <FormItem label="滚动条">
                  <RadioGroup v-model="iframeConfig.scrolling" type="button" size="small">
                    <Radio v-for="item in $PnDict.iframeScrollings" :label="item.value" :key="item.value">{{ item.label }}</Radio>
                  </RadioGroup>
                </FormItem>
              </Form>
            </div>
          </Panel>
        </Collapse>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="IViewDrawerComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">

          <InteractionReceive></InteractionReceive>

          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="关闭抽屉时运行脚本">
            <Alert show-icon style="padding-right: 8px;">
              抽屉式IFrame组件内通过visible变量控制抽屉的显示与隐藏
            </Alert>
            <CodeEditor v-model="drawerConfig.onCloseCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'IViewDrawerCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        drawerConfig: 'component.compConfigData.drawerConfig',
        iframeConfig: 'component.compConfigData.iframeConfig',

      })
    }
  }
</script>

<style scoped>

</style>
